<template>
	<view class="page">
		<!-- 左侧滚动视图 —— 商品类目 -->
		<scroll-view scroll-y class="left" :style="{height: windowHeight + 'px'}">
			<view>
				<uni-list>
					<uni-list-item clickable @click="switchCategory(i)" v-for="(c,i) in categoryList" :key="i"
						:title="c.cname" :class="{category:true,active:i===curCategory}">
					</uni-list-item>
				</uni-list>
			</view>
		</scroll-view>
		<!-- 右侧滚动视图 —— 该类目下对应的商品 -->
		<scroll-view scroll-y class="right" :style="{height: windowHeight + 'px'}">
			<view>
				<uni-list>

					<uni-list-item v-for="(p,i) in productList" :key="p.lid" :title="p.title" ellipsis="2"
						:thumb="$url.base+p.pic" thumbSize="lg" link="navigateTo"
						:to="'../product-details/product-details?pid='+p.lid"></uni-list-item>
				</uni-list>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowHeight: 0, //窗口高度
				categoryList: [], //商品分类列表
				curCategory: -1, //当前选中项
				productList: [],
			};
		},
		onLoad() {
			uni.getSystemInfo({
				success: result => {
					this.windowHeight = result.windowHeight
				}
			});
			// 页面加载时，异步请求商品分类信息
			uni.showLoading({
				title: '内容加载中...',
			})
			let url = this.$url.productCategory
			// console.log(url)
			uni.request({
				url,
				success: res => {
					// console.log(res.data)
					// this.categoryList = res.data
					// 服务器端数据较少，此处将数据拼接两次
					this.categoryList = [...res.data, ...res.data]
				},
				fail: res => {
					console.log(err)
				},
				complete: () => {
					uni.hideLoading()
				}
			});
		},
		methods: {
			switchCategory(index) {
				this.curCategory = index
			}
		},
		watch: {
			curCategory(newValue, oldValue) {
				let kw = this.categoryList[newValue].keywords
				let url = `${this.$url.productList}?kw=${kw}`
				// console.log(url)
				uni.showLoading({
					title: '商品列表加载中...'
				})
				uni.request({
					url,
					success: res => {
						// console.log(res.data.data)
						this.productList = res.data.data
					},
					fail: res => {
						console.log(err)
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			}
		},
	}
</script>

<style lang="scss">
	.page {
		display: flex;

		.left {
			width: 220rpx;
			flex-shrink: 0;	//弹性子元素在父元素宽度不够时，收缩权重为0

			.category {
				font-size: $uni-font-size-sm;
				background-color: $uni-bg-color-grey;

				&.active {
					background-color: #fff;
				}
			}
		}

		.right {
			flex: 1;
			width: 530rpx;
		}
	}
</style>
